<template>
  <div id="app">
    <div>
      <pre v-highlightjs="sourcecode" style="position: relative">
        <code @click="textNext()" v-show="!textShow" :class="codeMode"></code>
        <textarea 
            style="width: 100%;" 
            class="hljs" 
            @keyup.shift.space="textNext()" 
            type="text" v-show="textShow" 
            v-model="sourcecode"></textarea>
         <input 
            class="hljs-quote" 
            style="position: absolute;right: 0;"
            @keyup.shift.space = "textNext()" 
            type="text" v-show="textShow" 
            v-model="codeMode">
      </pre>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: function () {
    return {
      sourcecode: "def apsd:",
      codeMode: "python",
      textShow: false,
    };
  },
  methods: {
    textNext:function(){
      this.textShow = !this.textShow
    }
  },
};
</script>

<style>
#app{
  width: 500px;
  height: 500px;
}
</style>
